<template>
  <div>
    <Row>
      <Col span="8">
        <p class="header-title">{{headerTitle}}</p>
      </Col>
      <Col span="15">
      <Menu mode="horizontal" theme="dark" :active-name="currentName" @on-select="currentNameSelect">
        <MenuItem name="nrgl">
          <Icon type="ios-paper"/>
          内容管理
        </MenuItem>
        <MenuItem name="yhgl">
          <Icon type="ios-people"/>
          用户管理
        </MenuItem>
        <Submenu name="tjfx">
          <template slot="title">
            <Icon type="ios-stats"/>
            统计分析
          </template>
          <MenuGroup title="使用">
            <MenuItem name="3-1">新增和启动</MenuItem>
            <MenuItem name="3-2">活跃分析</MenuItem>
            <MenuItem name="3-3">时段分析</MenuItem>
          </MenuGroup>
          <MenuGroup title="留存">
            <MenuItem name="3-4">用户留存</MenuItem>
            <MenuItem name="3-5">流失用户</MenuItem>
          </MenuGroup>
        </Submenu>
        <MenuItem name="zhsz">
          <Icon type="ios-construct"/>
          综合设置
        </MenuItem>
      </Menu>
      </Col>
      <Col span="1"><img class="sign-out" src="../assets/icons/sign_out.svg" @click="headerClick"/></Col>
    </Row>
  </div>
</template>
<script>
  import {MsgBus} from '../components/js/msgBus';
  export default {
    name: 'Header',
    data(){
      return {
        headerTitle:'Vue 全家桶',
        currentName:'nrgl'
      }
    },
    methods: {
      headerClick: function () {
        MsgBus.$emit('msg', this.msg);
      },
      currentNameSelect:function (name) {
        this.$router.push("/" + name);
        console.log("导航栏模块: "+ name);
      }
    },
    watch:{
    }
  }
</script>
<style lang="css">
  @import "../style/header.css";
</style>
